<template>
  <div class="right-sub">
    <div class="map-box" :style="`width: ${isSplitScreen ? '50%' : '100%'}`">
      <cesium-map ref="mapL" @mapIsLoad="mapIsLoad"></cesium-map>
    </div>

    <div class="split-line"></div>

    <div class="map-box" :style="`width: 50%`" v-if="isSplitScreen">
      <cesium-map-split ref="mapR" @linkageMap="linkageMap"></cesium-map-split>
    </div>
  </div>
</template>

<script>
import cesiumMap from '@/components/cesiumMap';
import cesiumMapSplit from '@/components/cesiumMap/cesiumMapSplit.vue';
export default {
  components: { cesiumMap, cesiumMapSplit },

  data() {
    return {
      bottomData: null,
      isSplitScreen: false,
      isLeftTrigger: false,
      isRightTrigger: false,
      isReload: false
    };
  },

  methods: {
    mapIsLoad(state) {
      this.$emit('mapIsLoad', true);
    },

    // 双屏联动
    linkageMap(state) {
      this.removeLinkageMap();
      if (state) {
        this.viewerL = this.$refs.mapL.viewer;
        this.viewerR = this.$refs.mapR.viewer;
        this.syncLeftViewer();
        this.syncRightViewer();
      }
    },

    removeLinkageMap() {
      this.handlerL && this.handlerL.destroy();
      this.handlerL = null;
      this.handlerR && this.handlerR.destroy();
      this.handlerR = null;
      this.isLeftTrigger = false;
      this.isRightTrigger = false;
      if (this.viewerL) {
        this.viewerL.camera.changed.removeEventListener(this.syncViewerL);
        this.viewerL.scene.preRender.removeEventListener(this.syncViewerL);
      }
      this.viewerL = null;

      if (this.viewerR) {
        this.viewerR.camera.changed.removeEventListener(this.syncViewerR);
        this.viewerR.scene.preRender.removeEventListener(this.syncViewerR);
      }
      this.viewerR = null;
    },

    // 操作右侧 viewer 时与左侧同步
    syncLeftViewer() {
      const canvasL = this.viewerL.scene.canvas;
      this.handlerL = new Cesium.ScreenSpaceEventHandler(canvasL);
      this.handlerL.setInputAction(() => {
        this.isLeftTrigger = true;
        this.isRightTrigger = false;
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      this.viewerL.camera.changed.addEventListener(this.syncViewerL);
      this.viewerL.scene.preRender.addEventListener(this.syncViewerL);
    },

    syncViewerL() {
      if (this.isLeftTrigger) {
        this.viewerR.camera.flyTo({
          destination: this.viewerL.camera.position,
          orientation: {
            heading: this.viewerL.camera.heading,
            pitch: this.viewerL.camera.pitch,
            roll: this.viewerL.camera.roll
          },
          duration: 0.0
        });
      }
    },

    // 操作左侧 viewer 时与右侧同步
    syncRightViewer() {
      const canvasR = this.viewerR.scene.canvas;
      this.handlerR = new Cesium.ScreenSpaceEventHandler(canvasR);
      this.handlerR.setInputAction(() => {
        this.isLeftTrigger = false;
        this.isRightTrigger = true;
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      this.viewerR.camera.changed.addEventListener(this.syncViewerR);
      this.viewerR.scene.preRender.addEventListener(this.syncViewerR);
    },

    syncViewerR() {
      if (this.isRightTrigger) {
        this.viewerL.camera.flyTo({
          destination: this.viewerR.camera.position,
          orientation: {
            heading: this.viewerR.camera.heading,
            pitch: this.viewerR.camera.pitch,
            roll: this.viewerR.camera.roll
          },
          duration: 0.0
        });
      }
    },

    reloadMap() {
      this.isReload = true;
      setTimeout(() => {
        this.isReload = false;
      }, 100);
    },

    openSplitScreen(state) {
      this.isSplitScreen = state;
    },

    addListen() {
      this.eventBus.$on('reloadMap', this.reloadMap);
      this.eventBus.$on('openSplitScreen', this.openSplitScreen);
    },

    removeListen() {
      this.eventBus.$on('reloadMap', this.reloadMap);
      this.eventBus.$on('openSplitScreen', this.openSplitScreen);
    },
  },

  created() {
    this.viewer = this.Global.viewer;
    this.cameraChange = null;
    this.viewerL = null;
    this.viewerR = null;
    this.handlerL;
    this.handlerR;
    this.addListen();
  },

  beforeDestroy() {
    this.removeLinkageMap();
    this.removeListen();
  }
}
</script>

<style lang="less" scoped>
.right-sub {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .map-box {
    position: relative;
    height: 100%;
  }

  .split-line {
    width: 2px;
    height: 100%;
    background-color: #3c3737;
  }
}
</style>